<template>
  <a-drawer
    width="35%"
    :label-col="4"
    :wrapper-col="14"
    :visible="open"
    :body-style="{ height: 'calc(100vh - 100px)', overflow: 'auto' }"
    @close="cancel"
  >
    <a-spin :spinning="spinning" :delay="delayTime" tip="Loading...">
      <a-descriptions title="客户信息" layout="vertical">
        <a-descriptions-item label="姓名">
          {{ form.cusName }}
        </a-descriptions-item>

        <a-descriptions-item label="电话">
          {{
            form.phone.substring(0, 3) + "****" + form.phone.substring(7, 11)
          }}
        </a-descriptions-item>
        <a-descriptions-item label="地区/城市">
          {{ form.cityName }}
        </a-descriptions-item>
        <a-descriptions-item label="业务类型">
          {{ typeFormat(form.type) }}
        </a-descriptions-item>

        <a-descriptions-item label="客户级别">
          {{ levelFormat(form.level) }}
        </a-descriptions-item>
        <a-descriptions-item label="业务进度">
          {{ processFormat(form.progress) }}
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions title="跟进信息"></a-descriptions>
      <a-row>
        <!-- v-if="eidtshow" -->
        <a-col :span="24"
          ><a-card :bordered="true" style="padding: 10px" v-if="isinputshow">
            <a-row>
              <!-- <a-col :span="7" style="margin-right: 15px">
                <a-form-model-item label="" prop="ideasType">
                  <a-select
                    placeholder="请选择联系方式"
                    v-model="sform.ideasType"
                    :getPopupContainer="
                      (triggerNode) => {
                        return triggerNode.parentNode || document.body;
                      }
                    "
                    style="width: 100%"
                    allow-clear
                  >
                    <a-select-option
                      v-for="(d, index) in ideasTypeOptions"
                      :key="index"
                      :value="d.dictValue"
                      >{{ d.dictLabel }}</a-select-option
                    >
                  </a-select>
                </a-form-model-item>
              </a-col> -->
              <a-col :span="7" style="margin-right: 15px">
                <a-form-model-item label="" prop="level">
                  <a-select
                    placeholder="请选择用户等级"
                    v-model="sform.level"
                    :getPopupContainer="
                      (triggerNode) => {
                        return triggerNode.parentNode || document.body;
                      }
                    "
                    style="width: 100%"
                    allow-clear
                  >
                    <a-select-option
                      v-for="(d, index) in levelOptions"
                      :key="index"
                      :value="d.dictValue"
                      >{{ d.dictLabel }}</a-select-option
                    >
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="7" style="margin-right: 15px">
                <a-form-model-item label="" prop="progress">
                  <a-select
                    placeholder="请选择业务进度"
                    v-model="sform.progress"
                    :getPopupContainer="
                      (triggerNode) => {
                        return triggerNode.parentNode || document.body;
                      }
                    "
                    style="width: 100%"
                    allow-clear
                  >
                    <a-select-option
                      v-for="(d, index) in progressOptions"
                      :key="index"
                      :value="d.dictValue"
                      >{{ d.dictLabel }}</a-select-option
                    >
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="" prop="nextTime">
                  <a-date-picker
                    v-model="sform.nextTime"
                    valueFormat="YYYY-MM-DD"
                    :show-today="true"
                    placeholder="选择下次跟进时间"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="24" style="margin-top: -10px">
                <a-textarea
                  v-model="sform.takes"
                  placeholder="跟进内容"
                  :auto-size="{ minRows: 3, maxRows: 5 }"
              /></a-col>
              <!-- <a-col :span="7" style="margin-top: 10px">
                <span>重点标记：</span>
                <a-switch
                  checked-children="是"
                  un-checked-children="否"
                  @change="ismark"
                />
              </a-col> -->
              <!-- <a-col :span="9" style="margin-top: 10px">
                <span>添加图片(最多4张)：</span>
                <a-switch
                  checked-children="是"
                  un-checked-children="否"
                  @change="(checked) => (isaddimage = checked ? true : false)"
                />
              </a-col> -->
              <!-- <a-col :span="24" style="margin-top: 10px" v-if="isaddimage">
                <a-upload
                  :action="upload.url + '/common/upload'"
                  list-type="picture-card"
                  :file-list="fileList"
                  @preview="handlePreview"
                  @change="handleChange"
                  :headers="upload.headers"
                >
                  <div v-if="fileList.length < 4">
                    <a-icon type="plus" />
                    <div class="ant-upload-text">图片上传</div>
                  </div>
                </a-upload>
                <a-modal
                  :visible="previewVisible"
                  :footer="null"
                  @cancel="handleCancel"
                >
                  <img alt="图片信息" style="width: 100%" :src="previewImage" />
                </a-modal>
              </a-col> -->
              <a-col :span="24" style="margin-top: 15px; text-align: right">
                <a-button
                  @click="isinputshow = false"
                  style="margin-right: 15px"
                  shape="round"
                >
                  取消
                </a-button>
                <a-button type="primary" @click="shadowSubimt" shape="round">
                  保存
                </a-button>
              </a-col>
            </a-row>
          </a-card>
          <a-card :bordered="true" style="padding: 10px" v-if="!isinputshow">
            <a-row>
              <a-col :span="24">
                <a-input
                  placeholder="请输入跟进内容..."
                  @click="isinputshow = true"
                ></a-input>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
        <a-col :span="24" style="margin-left: 10px; margin-top: 20px">
          <a-card
            :bordered="false"
            style="height: 60vh; overflow-y: auto; padding: 20px 0 0 10px"
            v-if="customerShadowList.length > 0"
          >
            <a-timeline>
              <span v-for="(item, index) in customerShadowList" :key="index">
                <a-timeline-item color="green">
                  <a-icon
                    slot="dot"
                    type="clock-circle-o"
                    style="font-size: 16px"
                  />
                  业务进度：<a-tag color="#108ee9">
                    {{ processFormat(item.progress) }} </a-tag
                  ><br />
                  跟进内容：{{ item.takes }}<br />
                  跟进时间：{{ item.createTime }}<br />
                  用户等级：<a-tag color="#2db7f5">
                    {{ levelFormat(item.level) }} </a-tag
                  ><br />
                  下次跟进：<a-badge
                    status="progressing"
                    :text="item.nextTime"
                  /><br />
                </a-timeline-item>
                <!-- <a-timeline-item v-else>
                  跟进方式：<a-tag color="#108ee9"> {{ item.ideasType }} </a-tag
                  ><br />
                  跟进内容：{{ item.takes }}<br />
                  跟进时间：{{ item.createTime }}<br />
                  等级：<a-tag color="#2db7f5"> {{ item.level }} </a-tag><br />
                  下次跟进：{{ item.nextTime }}<br />
                </a-timeline-item> -->
              </span>
            </a-timeline>
          </a-card></a-col
        >
        <a-col
          :span="24"
          v-if="customerShadowList.length === 0"
          style="text-align: center"
        >
          <a-empty
            image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
            :image-style="{
              height: '60px',
            }"
          >
            <span slot="description"> 暂时无跟进记录 </span>
          </a-empty>
        </a-col>
      </a-row>
    </a-spin>
    <div class="bottom-control">
      <a-space>
        <a-button @click="cancel"> 关 闭 </a-button>
      </a-space>
    </div>
  </a-drawer>
</template>
<script>
import BizCustomerInfoEditForm from "./BizCustomerForm";
export default {
  ...BizCustomerInfoEditForm,
};
</script>
